<template>
  <div class="hawkContent">
    <div class="user_main">
      <div class="user_left">
        <!-- 树形搜索 -->
        <el-input
          placeholder="输入部门进行过滤"
          v-model="filterText">
        </el-input>

        <el-tree
          class="filter-tree"
          :data="data"
          :props="defaultProps"
          :filter-node-method="filterNode"
          ref="tree"
          @node-click="handleNodeClick"
          >
        </el-tree>

      </div>

      <div class="user_right" style="margin-left: 20px;">
      <el-row :gutter="20" >
      <el-col :span="5" class="elCol">
        <span>姓名</span>
        <el-input
          placeholder="请输入姓名搜索"
          v-model="queryForm.name"
        ></el-input>
      </el-col>
      <el-col :span="5" class="elCol">
        <span>性别</span>
        <div>
          <el-select clearable v-model="queryForm.sex" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
        </div>
      </el-col>
      <el-col :span="5" class="elCol">
        <span>状态</span>
        <div>
          <el-select clearable v-model="queryForm.status" placeholder="请选择">
        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
        </div>
      </el-col>
            <el-col :span="5" class="elCol">
        <span>部门</span>
        <div>
          <el-select clearable v-model="queryForm.status" placeholder="请选择">
        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
       </el-select>
        </div>
      </el-col>
        <el-col :span="5" class="elCol">
        <span>岗位</span>
        <div>
          <el-select clearable v-model="queryForm.status" placeholder="请选择">
        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
        </div>
      </el-col>
      <el-col :span="5" class="elCol">
        <span>公司</span>
        <div>
          <el-select clearable v-model="queryForm.status" placeholder="请选择">
        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
        </div>
      </el-col>
      <el-col :span="4" class="elCol" >
        <el-button type="hawkSearch" @click="searchData">搜索</el-button>
        <el-button plain @click="reSet">重置</el-button>
      </el-col>
      
    </el-row>

    <div class="buttons">
      <el-button @click="editUser" icon="el-icon-plus" type="primary">新增</el-button>
    </div>

    <hawk-table
    :page="queryForm.page"
      :table-data="tableData"
      @selectionChange="handleSelectionChange"
      :options="[
        { key: 'username', label: '用户名' },
        { key: 'name', label: '姓名' },
        { key: 'sex', label: '性别' },
        { key: 'phone', label: '电话' },
        { key: 'email', label: '邮箱' },
        { key: 'company', label: '公司' },
        { key: 'department', label: '部门' },
        { key: 'jobs', label: '岗位' },
        { key: 'status', label: '状态' },
        { key: 'date', label: '创建日期' },
        { key: 'update', label: '更新日期' },
        { key: 'choose', label: '角色选择' },
        { key: 'operation', label: '操作' },
      ]"
    >
    <template #status='{ row }'>
        <span>{{ row.status == 0 ? '已启用' : '已停用' }}</span>
      </template>
      <template #operation="{ row }">
        <span class="hawk-text-btn" @click="editUser(row)">新增</span>
        <span class="hawk-text-divider">|</span>
        <span class="hawk-text-btn" @click="editUser(row)">编辑</span>
        <span class="hawk-text-divider">|</span>
        <span class="hawk-text-btn" @click="delUser(row)">删除</span>
      </template>
    </hawk-table>
    <div class="bottom-btns">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page.current"
        :page-sizes="[10, 20, 50, 100]"
        v-if="tableData.length <= page.size"
        :page-size="page.size"
        layout=" prev, pager, next,sizes"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      :title="formTitle"
      :visible.sync="addDialogVisible"
      width="35%"
      :close-on-click-modal="false"
      @close="addDialogClosed"
    >
      <!-- 内容主题区 -->
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="90px"
      >
        <el-form-item label="用户名称" prop="username">
          <el-input v-model="addForm.username"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
          <el-form-item label="性别"  prop="sex">
            <el-radio-group v-model="addForm.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="addForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
        <el-form-item label="公司" prop="company">
            <el-select clearable v-model="addForm.company" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="部门" prop="department">
            <el-select clearable v-model="addForm.department" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="岗位" prop="jobs">
            <el-select clearable v-model="addForm.jobs" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="状态">
            <el-radio-group v-model="addForm.status">
              <el-radio label="是"></el-radio>
              <el-radio label="否"></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="角色选择" prop="choose">
          <el-select v-model="addForm.choose" multiple placeholder="请选择">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        </el-form-item>

      </el-form>
      <!-- 底部区 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
      </div>
    </div>

  </div>
</template>

<script>
/**
 * @author 韩玉龙
 * @description 用户管理的视图层
 * @api /moniter-host
 * @since 2021年11月3日18:03
 * @update 2021年11月3日18:04
 * @modifier 韩玉龙
 * @bug 无
 * @version v1.0.0
 */

import { getList, doDelete, doAdd, doEdit,searchList } from '@/api/monitor/hosts/host'
import HawkTable from '@/components/table'

export default {
  components: { HawkTable },
  //import引入的组件需要注入到对象中才能使用",
  data() {
    //这里存放数据",
    return {
      value: '',
      formTitle: '添加用户',
      addDialogVisible: false,
      multipleSelection: [],
      addForm: {
        username: '',
        name:'',
        sex:'',
        phone:'',
        email:'',
        company:'',
        department:'',
        jobs:'',
        status:'',
        date:'',
        update:'',
        choose:''
      },
      //搜索参数
      queryForm: {
        name: '',
        sex:'',
        status:'',
        company:''
      },
      addFormRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        name:[
          {
            required:true,message:'请输入姓名',trigger:'blur'
          }
        ],
        sex:[
          {
            required:true,message:'请选择性别',trigger:'blur'
          }
        ],
        phone:[
          {
            required:true,message:'请输入手机号',trigger:'blur'
          }
        ],
        email:[
          {
            required:true,message:'请输入邮箱',trigger:'blur'
          }
        ],
        company:[
          {
            required:true,message:'请选择公司',trigger:'blur'
          }
        ],
        department:[
          {
            required:true,message:'请选择部门',trigger:'blur'
          }
        ],
        jobs:[
          {
            required:true,message:'请选择岗位',trigger:'blur'
          }
        ],
        status:[
          {
            required:true,message:'请选择状态',trigger:'blur'
          }
        ],
        choose:[
          {
            required:true,message:'请选择角色',trigger:'blur'
          }
        ]
      },
      tableData: [
        {
          username:'admin',
          name:'张三',
          sex:'男',
          phone:14547592458,
          email:'add@qq.com',
          company:'同多优',
          department:'研发部',
          jobs:'开发',
          status:'是',
          date:'2021/10/08',
          update:'2021/10/09',
          choose:'超级管理员'
        }
      ],
      total: 0,
      page: {
        current: 1,
        size: 10
      },
      filterText: '',
      options:[
        {
          value: '0',
          label: '男'
        },
        {
          value: '1',
          label: '女'
        },
      ],
      options2:[
        {
          value: '0',
          label: '是'
        },
        {
          value: '1',
          label: '否'
        },
      ],
      data:[
        {
          label: '同多优科技',
          children: [
            {
            label: '郑州公司',
            id:1,
            children: [
              {
              label: '研发部门',
              id:2
            },
            {
              label: '市场部门'
            },
            ]
          },
          {
            label: '许昌公司',
            children: [
              {
              label: '运维部门'
            },
            {
              label: '开发部门'
            },
            ]
          }
          ],
          
        }
      ],
      defaultProps: {
          children: 'children',
          label: 'label'
        }
    }
  },
  //监听属性 类似于data概念",
  computed: {
    cellStyle() {
      return {
        padding: '8px 0'
      }
    }
  },
  //监控data中的数据变化",
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
  //方法集合",
  methods: {
    filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
    handleNodeClick(data) {
        console.log(data);
      },
    async searchData() {
      console.log("111")
        // const res = await searchList(this.queryForm.name);
        // this.tableData = [res]
        // this.total = 1
    },
    reSet() {
      this.queryForm = this.$options.data().queryForm
      // this.init()
    },
    async init() {
      const res = await getList(this.page)
      this.tableData = res.list
      this.total = res.count
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(val);
    },
    handleSizeChange(val) {
        this.page.size = val
        // this.init()
    },
    handleCurrentChange(val) {
        this.page.current = val
        // this.init()
    },
    save() {
      this.$refs.addFormRef.validate(async valid => {
        console.log(valid)
        if (!valid) return
        if (this.addForm.username) {
          await doEdit(this.addForm)
        } else {
          await doAdd(this.addForm)
        }
        this.addDialogClosed()
      })
    },
    delUser(row) {
      this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then( async () => {
          let ret = await  doDelete(row.hostid)
          if (ret.code == 20000) {

            let type = ''
            if (ret.data) {
              ret.message = '删除成功'
              type = 'success'
            } else {
              type = 'error'
            }
            this.$message({
              type: type,
              message: ret.message,
            })

            // console.log(this.multipleSelection.length);
            if (this.multipleSelection.length == this.tableData.length) {
              this.queryForm.page.current = this.queryForm.page.current - 1
              if (this.queryForm.page.current < 1) {
                this.queryForm.page.current = 1
              }
            }

            this.multipleSelection = []
            this.init()
          }
          // this.init()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    editUser(row, type) {
      console.log(row,'5555')
      if (!row.username) {
        this.formTitle = '添加用户'
      } else {
         this.formTitle = '修改用户'
          this.addForm = Object.assign({}, row)
      }
      this.addDialogVisible = true
    },
    addDialogClosed() {
      this.addForm = this.$options.data().addForm
      // this.init()
      this.addDialogVisible = false
      this.$refs.addFormRef.resetFields()
    },
    multiDel(){
      console.log(this.multipleSelection)
      if(this.multipleSelection.length > 0){
         this.$confirm('是否删除所有选中用户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          this.multipleSelection.forEach(item => {
            doDelete(item.hostid)
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // this.init()
        }) 
      }
    },
  },
  //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate() {},

  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {
    // this.init()
  },

  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {}
}
</script>

<style lang="scss">
.hawkContent {
  width: calc(100% - 40px);
  min-height: calc(100vh - 140px);
  background: #fff;
  padding: 20px;
  border-radius: 8px;

  .inputLabel {
    font-size: 14px;
    color: #333333;
  }

  .bottom-btns {
    float: right;
    padding: 0 20px;
    margin-top: 10px;

    &-left {
      display: flex;
      align-items: center;

      &-num {
        margin-right: 10px;
        color: #333333;
        font-size: 14px;
      }
    }
  }
}
.elCol{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  span{
    width: 50px;
  }
}
.user_main{
  display: flex;
  .user_left{
    flex: 1;
  }
  .user_right{
    flex: 6;
  }
}
.colorFont{
  color: blue;
}
.buttons{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
}
</style>
